<!--
 * @Description:
 * @Author: cgt
 * @Date: 2021-12-23 14:05:56
 * @LastEditors: cgt
 * @LastEditTime: 2021-12-28 19:56:06
-->
<template>
  <div>
    <el-table border :data="tableData" @row-click="rowClickHandle">
      <el-table-column prop="name" label="书签名称"></el-table-column>
      <el-table-column label="删除">
        <template slot-scope="scope">
          <el-button @click="deleteBookMark(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-input placehoder="请输入书签名字" v-model="bookmarkName">
      <el-button slot="append" @click="addBookMark">添加</el-button>
    </el-input>
  </div>
</template>

<script>
import mixins from '../mixins';
export default {
  name: 'BookMarkTool',
  props: {
    getTool: {
      type: Function,
      required: true
    },
    mapLoadSuccess: Boolean
  },
  mixins: [mixins],
  data() {
    return {
      tableData: [
        {
          name: '书签1',
          bound: [117.51937864759958, 24.354290588549162, 118.6180114601002, 24.628605212660815]
        },
        {
          name: '书签2',
          bound: [116.71288363261101, 24.81433278840609, 122.32315871955859, 26.203546726362504]
        },
        {
          name: '书签3',
          bound: [106.23789558332527, 25.037569531773883, 129.1919885443233, 30.60420273461331]
        }
      ],
      bookmarkName: ''
    };
  },
  watch: {
    mapLoadSuccess(success) {
      if (success) {
        this.init();
      }
    }
  },
  methods: {
    init() {
      this.getTool('BookMarkTool').setBookmarkList(this.tableData);
    },
    async addBookMark() {
      var result = await this.getTool('BookMarkTool').add({
        name: this.bookmarkName,
        bound: this.getTool('BaseMapTool').getBounds()
      });
      this.refresh();
      this.bookmarkName = '';
      this.$alert(result.message);
    },
    async deleteBookMark(bookMark) {
      var result = await this.getTool('BookMarkTool').delete(bookMark);
      this.refresh();
      this.$alert(result.message);
    },
    refresh() {
      this.tableData = this.getTool('BookMarkTool').bookmarkList;
    },
    rowClickHandle(row) {
      this.getTool('BaseMapTool').fitBounds(row.bound);
    }
  },
  mounted() {}
};
</script>

<style scoped></style>
